<template>
	<view class="contain">
		<view class="flex flex-col w-[700rpx] m-auto p-2 pl-3 pr-3 m-2 justify-start week">
			<view class="flex w-[100%]">
				<view class="flex w-[100%] justify-center" :class="sameWeek===item?'grayThrough':''" v-for="(item,index) in week.data" @click="selectDay(index)">{{item}}</view>
			</view>
			<view class="flex w-[100%] mt-2">
				<view class="flex w-[100%] justify-center textcolor" :class="sameToday===item?'grayThrough':''" v-for="(item,index) in days.data" @click="dayselect(index,item)"><text :class="index===curIndex?'selected':''">{{item}}</text></view>
			</view>
		</view>
		
		<view class="flex justify-between w-[95%] m-auto items" v-for="(item,index) in timeList.data" @click="guahao(item)">
			<text>{{item.start}}至{{item.end}}</text>
			<text>剩余<text class="tcolor">{{item.guahaoNUmber}}</text>个号</text>
			<text class="org">免费</text>
			<text>可挂号></text>
		</view>
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { onLoad,onShow} from '@dcloudio/uni-app'
import {getTodayNumberByWeekday,getweek_II} from '@/common/date.js'
import { userStore } from '@/stores/userStore'

let store = userStore();	
let { hasLogin,userData } = userStore();
let isSameDay=ref(false);
let sameWeek=ref('');   //是否同星期
let sameToday=ref(''); //是否同一天
const week=reactive({data:["一","二","三","四","五","六","日"]});
let days=reactive({data:[]});
let curdaynum=ref('');
let ymd=ref(''); //2024-08-08
const weekday = new Date().getDay();

//总数据
let totalList=reactive({data:[]});

//过滤后的数据
let timeList=reactive({data:[
	{dayNumber: "", week: -1, start: "08:00", end: "08:30", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "08:30", end: "09:00", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "09:00", end: "09:30", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "09:30", end: "10:00", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "10:00", end: "10:30", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "10:30", end: "11:00", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "11:00", end: "11:30", guahaoNUmber: 2},
	{dayNumber: "", week: -1, start: "11:30", end: "12:00", guahaoNUmber: 2},
]});




let curIndex=ref(-1); //星期六
const selectDay=(index:number)=>{
		curdaynum.value=days.data[index];
		getTime(index);
}
const dayselect=(index:number,daynum:string)=>{
		curdaynum.value=daynum;
		getTime(index);
}

const getTime=(index:number)=>{
		console.log("当前日期",index,isCurrentDay(index+1));
		if(isCurrentDay(index+1)){
			uni.$tools.Toast("当天不能预约 请选择其它日期");
			return;	
		}
		curIndex.value=index;
		const date = new Date();
		let month=date.getMonth()+1;
		if(month<10) month="0"+month;
		ymd.value=date.getFullYear()+"-"+month+"-"+curdaynum.value;
		//获取预约时间
		getTimeData();	
}


/* 是否星期六自身当天 或者 星期天自身当天 */
const isCurrentDay=(index:number)=>{
	return new Date().getDay()===index?true:false;
	//console.log("今天是:",new Date().getDay(),today) */
}

const guahao=(item:any)=>{
	if(item?.guahaoNUmber<=0){
		uni.$tools.Toast(`${item?.start}至${item?.end}已满`);
		return;
	}
	if(curIndex.value<0){
		uni.$tools.Toast("点击上方选择星期六或者星期日");
		return;
	}
	let time=`${item?.start}至${item?.end}`;
	const date = new Date();
	let month=date.getMonth()+1;
	if(month<10) month="0"+month;
	ymd.value=date.getFullYear()+"-"+month+"-"+curdaynum.value;
	let selecttime=ymd.value+getStr(curIndex.value)+" "+time;
	userData.appointment=selecttime; //保存预约的时间
	//uni.$tools.Toast(selecttime);
	uni.$tools.GoUrl('/pages/word/word',1);
}

const getStr=(index:number)=>{
	if(index===0) return "(星期一)";
	if(index===1) return "(星期二)";
	if(index===2) return "(星期三)";
	if(index===3) return "(星期四)";
	if(index===4) return "(星期五)";
	if(index===5) return "(星期六)";
	if(index===6) return "(星期日)";
	return "";
}

onLoad(()=>{
	days.data=[];
	for(let i=1;i<8;i++){
		//console.log(i);
		let daynum=getTodayNumberByWeekday(i);
		console.log(daynum);
		if(daynum<10){
			daynum="0"+daynum;
		}else{
			daynum=daynum+"";
		}
		days.data.push(daynum);
	}
	console.log("日期列表",days.data);
});
onShow(()=>{
	curIndex.value=new Date().getDay();
	//console.log(new Date().getDate());
	sameWeek.value=getweek_II();
	sameToday.value=new Date().getDate().toString(); //今天几号
	curdaynum.value=(new Date().getDate()+1).toString(); //定位到明天
	const today = week.data[new Date().getDay()-1];
	console.log("今天是",(curIndex.value+1),today,sameToday.value,sameWeek.value);
	if(today===sameWeek.value) isSameDay.value=true; //是否同一天
	//console.log("是否同一天/当天",isSameDay.value);
	
	if(userData.userinfo===null || hasLogin===false){
		uni.$tools.Toast("会话失效请重新登录");
		setTimeout(()=>{
			uni.$tools.GoUrl('/pages/login/login',0);
		},1000);
		return;
	}
})



//获取挂号参数
const getTimeData=()=>{ //time: 2024-08-08
	let paraData={
		appointmentthospital:userData.appointmenthospital, //根据医院名称区分  从selecthospital页面缓存中获取
		daynumber:ymd.value,
		appweek:curIndex.value+1 //6
	}
	console.log("获取挂号参数:",paraData);
	uni.$tools.Reqeust('/api/getGuaHaoDate',paraData,'POST').then((res:any)=>{
		console.log(res);
		if(res.data.code===200){
			totalList.data=res.data.timelist;
			timeList.data=totalList.data.filter(item=>item.week===(curIndex.value+1));
		}
	});
};

</script>

<style>
	page{
		background:#f2f1f6;
		padding-bottom:100rpx;
	}
</style>
<style lang='scss' scoped>
	@import "guahao_other.scss";
</style>